<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="icon" th:href="@{/img/favicon.ico}"/>
    <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
</head>
<body style="background: url('/img/login_bgx.gif');width: 100%;height: 100%;">

<div class="container" >
<div class="col-12" style="text-align: center"><label ><font style="font-size: 30px">登录LOGIN</font></label></div>
<div  class="col-md-4" style=" margin-left: 440px;margin-top: 100px">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="firstname" class="col-sm-3 control-label">用户名:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="firstname" placeholder="username">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname" class="col-sm-3 control-label">密  码:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="lastname" placeholder="password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox">请记住我
                    </label>
                </div>
            </div>
        </div>
        <a th:href="@{/register}">注册新用户</a>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" onclick="log()" class="btn btn-default">登录</button>
            </div>
        </div>
    </form>
</div>
</div>
<script type="text/javascript">
    function log() {
        //获取上面input控  根据id去value的值
        var username = $('#firstname').val()
        var password = $('#lastname').val()

        if (username == ""){
            alert("请输入用户名")
            return false
        }
        if (password == ""){
            alert("请输入密码")
            return false
        }
        $.ajax({
            //请求的类型  post  或者是get
            type: "post",
            //请求的路径
            url: "/login",
            data: {username:username, password:password},
            dataType: "json",
            success: function(data){
                if (data == "1"){
                    alert("登录成功")
                    location.href = '/list'
                }
                if(data == "2"){
                    alert("密码错误")
                }
                if(data == "3"){
                    alert("用户不存在")
                }
            }
        });
    }

</script>
</body>
</html>